<template>
  <div>
    <!--表格栏-->
    <el-table  :data="data.list" :highlight-current-row="highlightCurrentRow" @selection-change="selectionChange" @cell-click="cellClick" :cell-style="cellStyle"
          @current-change="handleCurrentChange" v-loading="loading" element-loading-text="拼命加载中..." :border="border" :stripe="stripe"
          :show-overflow-tooltip="showOverflowTooltip" :max-height="maxHeight" :size="size" :align="align" style="width:100%;font-size:14px;height:100%" :header-cell-style="tableHeaderColor" :row-style="tableRowStyle" :height="height">
      <!-- <el-table-column type="selection" width="40" v-if="showBatchDelete & showOperation"></el-table-column> -->
      <el-table-column v-for="column in columns" header-align="center" align="center" :show-overflow-tooltip="true"
        :prop="column.prop" :label="column.label" :width="column.width" :min-width="column.minWidth"
        :fixed="column.fixed" :key="column.prop" :type="column.type" :formatter="column.formatter"
        :sortable="column.sortable==null?true:column.sortable">
      </el-table-column>
      <el-table-column label="状态" :width="statusWidth" header-align="center" v-if="showStatus" align="center">
        <template slot-scope="scope">
          <kt-button icon="" label="待确认" v-if="scope.row.stat==7" :size="size" type="primary" @click="handleNotSure(scope.$index, scope.row)" />
          <kt-button icon="" label="下单" v-else-if="scope.row.stat==1" :size="size" type="text"/>
          <kt-button icon="" label="待接单" v-else-if="scope.row.stat==2" :size="size" type="text"/>
          <kt-button icon="" label="已接单" v-else-if="scope.row.stat==3" :size="size" type="text"/>
          <kt-button icon="" label="取消接单" v-else-if="scope.row.stat==4" :size="size" type="text"/>
          <kt-button icon="" label="签到" v-else-if="scope.row.stat==5" :size="size" type="text"/>
          <kt-button icon="" label="签到超时" v-else-if="scope.row.stat==6" :size="size" type="text"/>
          <kt-button icon="" label="签退超时" v-else-if="scope.row.stat==8" :size="size" type="text"/>
          <kt-button icon="" label="确认" v-else-if="scope.row.stat==9" :size="size" type="text"/>
          <kt-button icon="" label="确认超时" v-else-if="scope.row.stat==10" :size="size" type="text"/>
          <kt-button icon="" label="接单超时" v-else-if="scope.row.stat==11" :size="size" type="text"/>
          <kt-button icon="" label="取消下单" v-else-if="scope.row.stat==12" :size="size" type="text"/>
          <kt-button icon="" label="" v-else :size="size" type="text"/>
        </template>
      </el-table-column>  
      <el-table-column label="操作" style="height:100%" :width="operationWidth" fixed="right" v-if="showOperation" header-align="center" align="center">
        <template slot-scope="scope">
          <kt-button icon="el-icon-sort" label="上下线" v-if="showUpDown" :size="size" type="success" @click="handleUpDown(scope.$index,scope.row)"/>
          <kt-button icon="fa fa-edit" label="修改" v-if="showEdit" :size="size" type="warning" @click="handleEdit(scope.$index, scope.row)" />
          <kt-button icon="fa fa-trash" label="删除" v-if="showDelete" :size="size" type="danger" @click="handleDelete(scope.$index, scope.row)" />
          <kt-button icon="fa el-icon-search" label="查看" v-if="showLook" :size="size" type="success" @click="handleLook(scope.$index, scope.row)"/>
          <kt-button icon="fa fa-trash" label="取消" v-if="showCancel" :size="size" type="warning" @click="handleCancel(scope.$index, scope.row)"/>
          <kt-button icon="el-icon-sort" label="上下线记录" v-if="showUpDownRecord" :size="size" type="success" @click="handleUpDownRecord(scope.$index,scope.row)"/>
          <kt-button icon="el-icon-monitor" label="重置密码" v-if="showResetCode" :size="size" type="primary" @click="handleResetCode(scope.$index, scope.row)"/>
          <kt-button icon="el-icon-check" label="审批" v-if="showExamine" :size="size" type="primary" @click="handleExamine(scope.$index, scope.row)" />
          <kt-button icon="fa fa-trash" label="移除" v-if="showRemove" :size="size" type="danger" @click="handleRemove(scope.$index, scope.row)" />
        </template>
      </el-table-column>
    </el-table>
    <!--分页栏-->
    <div class="toolbar" style="padding:10px; overflow:hidden">
      <el-pagination layout="total, prev, pager, next, jumper" @current-change="refreshPageRequest"
        :current-page="pageRequest.pageNum" :page-size="pageRequest.pageSize" :total="data.total*1 || 0" style="float:right;">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import KtButton from "@/components/KtButton"
export default {
  name: 'KtTable',
  components:{
	    KtButton
	},
  props: {
    columns: Array, // 表格列配置
    data: Object, // 表格分页数据
    tableHeaderColor:{//表头的样式
      type: Function,
      default: function () {
        return 'background-color:#bee1f4;color:#6f7075;font-weight: 500;'
      }
    },
    tableRowStyle:{//table tr 的样式   by guo 2019-7-16 添加
      type: Function,
      default: function () {
        return ''
      }
    },
    cellStyle:{//table cell单元格  by guo 2020-8-13 添加
      type: Function,
      default: function () {
        return ''
      }
    },
    operationWidth:{//操作栏的宽度
      type: Number,
      default:185
    },
    showEdit:{//修改按钮的显示或隐藏
      type: Boolean,
      default: true
    },
    showDelete:{//删除按钮的显示或隐藏
      type: Boolean,
      default: true
    },
    showCancel:{
      type: Boolean,
      default: false
    },
    showLook:{//查看按钮的显示或隐藏
      type:Boolean,
      default: true
    },
    showResetCode:{//重置密码的显示和隐藏
      type:Boolean,
      default: false
    },
    showExamine:{//审批按钮的显示和隐藏
      type:Boolean,
      default:false
    },
    showRemove:{//移除按钮显示和隐藏
      type:Boolean,
      default:false
    },
    showUpDown: {//上下线
       type:Boolean,
      default:false
    },
    showUpDownRecord:{//上下线记录
      type:Boolean,
      default:false
    },
    size: { // 尺寸样式
      type: String,
      default: 'mini'
    },
    align: {  // 文本对齐方式
      type: String,
      default: 'center'
    },
    maxHeight: {  // 表格最大高度   不能设置  高度不能自适应
    //   type: Number,
    //   default: 480
    },
    showOperation: {  // 是否显示操作组件
      type: Boolean,
      default: true
    },
    border: {  // 是否显示边框
      type: Boolean,
      default: false
    },
    stripe: {  // 是否显示斑马线
      type: Boolean,
      default: true
    },
    highlightCurrentRow: {  // // 是否高亮当前行
      type: Boolean,
      default: true
    },
    showOverflowTooltip: {  // 是否单行显示
      type: Boolean,
      default: true
    },
    showBatchDelete: {  // 是否显示操作组件
      type: Boolean,
      default: true
    },
    statusWidth: {//状态的宽度
      type: Number,
      default:185
    },
    showStatus: { //是否显示状态栏
      type: Boolean,
      default: false
    },
    height:{
      type : String,
    }
  },
  data() {
    return {
      // 分页信息
	    pageRequest: {
            pageNum: 1,
            pageSize: 10
        },
        loading: false,  // 加载标识
        selections: []  // 列表选中列
    }
  },
  methods: {
    // 分页查询
    findPage(){
      this.loading = true
      let callback = res => {
        this.loading = false
      }
      this.$emit('findPage', {pageRequest:this.pageRequest, callback:callback})
    },
    // 选择切换
    selectionChange(selections){
      this.selections = selections
      this.$emit('selectionChange', {selections:selections})
    },
    // 选择切换
    handleCurrentChange(val){
        console.log(val)
      this.$emit('handleCurrentChange', {val:val})
    },
    // 换页刷新
	  refreshPageRequest(pageNum){
        console.log(pageNum)
      this.pageRequest.pageNum = pageNum
      this.$emit('refreshPageRequest', this.pageRequest.pageNum)
    },
    // 编辑
		handleEdit(index, row){
      this.$emit('handleEdit', {index:index, row:row})
		},
    // 删除
		handleDelete(index, row){
			this.delete(row.id,row)
		},
		// 删除操作
		delete(ids,row){
			this.$confirm('确认删除选中记录吗？', '提示', {
        type: 'warning',
        closeOnClickModal: false,
			}).then(() => {
        let params = []
        let datainfo={}
        datainfo=Object.assign({}, row);
				let idArray = (ids+'').split(',')
				for(var i=0; i<idArray.length; i++) {
					params.push({'id':idArray[i]})
        }
        this.loading = true
        let callback = res => {
          if(res.code == 200) {
            this.$message({message: '删除成功', type: 'success'})
            this.findPage()
          } else {
            this.$message({message: '操作失败, ' + res.message, type: 'error'})
          }
          this.loading = false
        }
        let back = res => {
          this.loading = false
        }
        this.$emit('handleDelete', {params:params,datainfo:datainfo,callback:callback,back:back})
			}).catch(() => {
			})
    },
    //查看详情
    handleLook(index,row){
      this.$emit('handleLook', {index:index, row:row})
    },
    handleCancel:function(index,row) {
      this.$emit('handleCancel', {index:index, row:row})
    },
    //重置密码
    handleResetCode(index,row){
      this.$emit('handleResetCode', {index:index, row:row})
    },
    //待确认
    handleNotSure(index,row){
      this.$emit('handleNotSure', {index:index, row:row})
    },
    //审批
    handleExamine(index,row){
      this.$emit('handleExamine',{index:index, row:row})
    },
    //移除
    handleRemove(index,row){
      this.$emit('handleRemove',{index:index, row:row})
    },
    //上下线记录
    handleUpDownRecord(index,row){
      this.$emit('handleUpDownRecord',{index:index, row:row})
    },
    handleUpDown(index,row){
      this.$emit('handleUpDown',{index:index, row:row})
    },
    //表格单元格的点击事件
    cellClick(row, column, cell, event) {
      this.$emit('cellClick',{row:row,column:column,cell:cell,event:event})
    }
  },
  mounted() {
    this.refreshPageRequest(1)
  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-table__fixed-right{
  height: 100%!important;
}

</style>
